<template>
  <div style="min-height: 600px;">
    <div v-if="list.length">
      <el-divider></el-divider>
      <h2 style="margin: 20px 0">文章列表</h2>
      <el-timeline>

        <el-timeline-item color="black" v-for="p in list" :key="p.id"  :timestamp="p.time" placement="top">
          <el-card @click="getById(p.id)" shadow="hover">
            <h1 style="height: 30px"><p>{{p.title}}</p></h1>
            <h5 style="height: 60px;overflow: hidden;font-weight: normal;font-size: 10px;line-height: 20px"><span>&emsp;{{p.label}}</span></h5>
            <span style="height: 30px">
          <div style="float: left">{{p.time.split(' ')[0]}}</div>
          <div style="float: right">阅读量:{{p.readSum}}</div>
        </span>
          </el-card>
        </el-timeline-item>

      </el-timeline>
      <el-divider></el-divider>
    </div>
    <div v-else>
      <h1>暂无信息！</h1>
    </div>
  </div>
</template>

<script>
import {articleList} from "@/api/article"
import pubsub from "pubsub-js"

export default {
  name: "articleList",
  data(){
    return{
      list:[],
      listInit:[],
      kindChangeId:null,
      kindInitId:null
    }
  },
  beforeUnmount() {
    pubsub.unsubscribe(this.kindChangeId);
    pubsub.unsubscribe(this.kindInitId);
  },
  mounted() {
    articleList().then(res=>{
      if(res.data.code!=="100") this.$notify.error(this.notifyMsgErr("数据拉取失败!"));
      this.list=res.data.data;
      this.list.reverse();
      this.listInit=this.list;
      if(this.$route.params.kind) this.list=this.listInit.filter(p=>p.kind===this.$route.params.kind);
    }).catch(err=>this.$notify.error(this.notifyMsgErr(err.message)));
    this.kindChangeId=pubsub.subscribe("kindChange",(name,context)=>{
      this.list=this.listInit.filter(p=>p.kind===context);
    })
    this.kindInitId=pubsub.subscribe("kindInit",()=>{
      this.list=this.listInit;
    })
  },
  methods:{
    getById(id){
      this.$router.push({
        name:'content',
        params:{
          id
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-card{
  width: 100%;
  height: 150px;
  list-style: none;
  background-color: white;
  display: inline-block;
  border-radius: 10px;
  margin: 5px 0;
  &:hover{
    cursor: pointer;
    user-select: none;
    text-decoration:underline
 }
}
</style>
